<template>
    <div class="main">
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="用户">
                    <el-input v-model="page.name" placeholder="请输入昵称" clearable />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="page.phone" placeholder="请输入手机号" clearable />
                </el-form-item>
                <el-form-item label="黑名单">
                    <el-select v-model="page.blacklist" placeholder="请选择" clearable>
                        <el-option label="是" :value="0" />
                        <el-option label="否" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-date-picker v-model="page.createTime" type="daterange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" clearable format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                    <el-button type="primary" @click="exportData()">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" style="width: 100%" max-height="600px"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="userName" label="用户昵称" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" align="center">
                </el-table-column>
                <el-table-column prop="orderNum" label="订单数" align="center">
                </el-table-column>
                <!-- <el-table-column prop="money" label="金额" align="center">
                </el-table-column> -->
                <el-table-column prop="integration" label="会员成长值" align="center">
                </el-table-column>
                <el-table-column prop="integral" label="积分" align="center">
                </el-table-column>
                <el-table-column label="分销信息" align="center">
                    <template #default="scope">
                        <p>分销商：{{ scope.row.distributor == 0 ? '是' : '否' }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="是否为黑名单" align="center">
                    <template #default="scope">
                        <p>{{ scope.row.blacklist == 0 ? '是' : '否' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="addEdiClick(2, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
    <!-- 新增修改 -->
    <el-dialog v-model="dialogVisible" title="查看详情" width="1200px" :before-close="handleClose" top="5vh">
        <Add v-if="dialogVisible" :rowData="rowData" @OKdata="OKdata"/>
    </el-dialog>
</template>

<script setup>
import Add from './add.vue' // 引入组件
import { onMounted, reactive, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { userList } from '@/api/userManagement.js'
import { exportExcel } from '@/utils/exportUtil';

const dialogVisible = ref(false)
const page = reactive({
    name: "",
    phone: "",
    blacklist: '',
    createTime: [
    ],
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const multipleSelection = ref([])
const rowData = ref({})



// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.name = "";
    page.phone = "";
    page.blacklist = '';
    page.createTime = [];
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}
// 弹框保存
const OKdata = (num) => {
    getList()
    if (num) {
        dialogVisible.value = false
    }
}
// 弹框关闭
const handleClose = () => {
    dialogVisible.value = false
    getList()
}
// 查看
const addEdiClick = (num, row) => {
    dialogVisible.value = true
    rowData.value = row
}
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(val);

}
// 导出数据
const exportData = () => {
    // 定义表头
    const headers = [
        { key: 'userName', label: '用户' },
        { key: 'phone', label: '手机号' },
        { key: 'balance', label: '会员成长值' },
        { key: 'integration', label: '积分' },
        { key: 'orderNum', label: '订单数' },
        { key: 'createTime', label: '创建时间' },
        { key: 'distributor', label: '是否分销商' },
        { key: 'blacklist', label: '是否为黑名单(0-是，1-否)' },
    ];

    // 导出数据
    exportExcel(tableData, '用户信息', headers);
}
onMounted(() => {
    getList()
})
// 获取列表
const getList = () => {
    tableData.length = 0
    total.value = 0
    userList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    width: 100%;
    min-width: 1000px;
    word-wrap: normal;

    ::v-deep .el-date-editor {
        width: 330px !important;
    }
}

.box-card :deep(.el-select__wrapper) {
    width: 100px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>